<template>
  <view class="reader__down-wrap">
    <view
      :style="{
        color: themeConfig.menuTextColor,
        bottom: showMenu ? '0' : '-100%',
      }"
      :class="['reader__down', 'menu', menuName]"
    >
      <!-- 设置渲染 -->
      <Transition
        :mode-class="['slide-bottom']"
        :show="showMenu"
        style="height: 100%"
        :styles="{
          boxShadow: `2rpx -2rpx 6rpx ${themeConfig.menuShadowColor}`,
          height: '100%',
          display: 'flex',
          flexFlow: 'column nowrap',
        }"
      >
        <view class="menu-content" :style="{ background: themeConfig.menuBackground }">
          <template v-if="menuName === 'default'">
            <view class="info">{{ chapterInfo }}</view>
            <view class="form">
              <text class="iconfont icon-arrow-left" @click="loadChapter({ preOrNext: 'pre' })"></text>
              <slider
                :active-color="themeConfig.slideLeftColor"
                :background-color="themeConfig.slideRightColor"
                :block-color="themeConfig.menuBackground"
                :max="maxChapterNum"
                :value="chapterNum"
                block-size="16"
                step="1"
                min="1"
                @change="changeChapter"
              />
              <text class="iconfont icon-arrow-right" @click="loadChapter({ preOrNext: 'next' })"></text>
            </view>
          </template>
          <template v-else-if="menuName === 'setting'">
            <view class="bright" :style="{ 'border-color': themeConfig.splitLineColor }">
              <text class="iconfont icon-dark"></text>
              <slider
                :active-color="themeConfig.slideLeftColor"
                :background-color="themeConfig.slideRightColor"
                :block-color="themeConfig.menuBackground"
                :value="bright"
                block-size="16"
                step="1"
                min="1"
                max="100"
                @change="handleChangeBright"
              />
              <text class="iconfont icon-light"></text>
            </view>
            <view class="font-size" :style="{ 'border-color': themeConfig.splitLineColor }">
              <text>字号</text>
              <view class="right">
                <text class="iconfont icon-font-size-reduce" @click="handleChangeFontSize('reduce')"></text>
                <text class="cur-font-size">{{ fontSize }}</text>
                <text class="iconfont icon-font-size-add" @click="handleChangeFontSize('add')"></text>
              </view>
            </view>
            <view class="auto-buy">
              <text>自动购买下一章</text>
              <view class="right">
                <switch
                  :color="themeConfig.slideLeftColor"
                  :checked="isAutoBuy"
                  @change="changeAutoBuy"
                />
              </view>
            </view>
          </template>
          <template v-if="menuName === 'mode'">
            <view class="mode-select">
              <view
                class="mode-item"
                :style="{
                  background: themeConfig.displayColor[theme],
                  border: `1px solid ${themeConfig.currentThemeBorderColor}`
                }"
                @click="handleSwitchMode('scroll')"
              >
                <text class="iconfont icon-gundong"/>
                <text class="mode-item-text">上下滚动</text>
                <text v-if="modeName === 'scroll'" class="iconfont icon-xuanzhong1"/>
              </view>
              <view
                class="mode-item"
                :style="{
                  background: themeConfig.displayColor[theme],
                  border: `1px solid ${themeConfig.currentThemeBorderColor}`
                }"
                @click="handleSwitchMode('page')"
              >
                <text class="iconfont icon-book"/>
                <text class="mode-item-text">左右翻页</text>
                <text v-if="modeName === 'page'" class="iconfont icon-xuanzhong1"/>
              </view>
            </view>
          </template>
          <template v-if="menuName === 'theme'">
            <view class="color">
              <view class="color-item" @click="switchTheme('default')">
                <view
                  class="color-item-block"
                  :style="{
                    background: themeConfig.displayColor.default,
                    border: `1px solid ${theme === 'default' ? themeConfig.currentThemeBorderColor : 'transparent'}`
                  }"
                />
                <text>默认</text>
              </view>
              <view class="color-item" @click="switchTheme('yellow')">
                <view
                  class="color-item-block"
                  :style="{
                    background: themeConfig.displayColor.yellow,
                    border: `1px solid ${theme === 'yellow' ? themeConfig.currentThemeBorderColor : 'transparent'}`
                  }"
                />
                <text>纸张</text>
              </view>
              <view class="color-item" @click="switchTheme('green')">
                <view
                  class="color-item-block"
                  :style="{
                    background: themeConfig.displayColor.green,
                    border: `1px solid ${theme === 'green' ? themeConfig.currentThemeBorderColor : 'transparent'}`
                  }"
                />
                <text>护眼</text>
              </view>
              <view class="color-item" @click="switchTheme('dark')">
                <view
                  class="color-item-block"
                  :style="{
                    background: themeConfig.displayColor.dark,
                    border: `1px solid ${theme === 'dark' ? themeConfig.currentThemeBorderColor : 'transparent'}`
                  }"
                />
                <text>夜间</text>
              </view>
            </view>
          </template>
          <template v-if="menuName === 'mulu'">
            <ChapterMulu :show="showMenu" @load-chapter="loadChapter" />
            <!-- 蒙层 -->
            <view v-if="showMenu" class="overlay" @click="closeMulu" />
          </template>
        </view>
        <view
          :class="['menu-footer', isIphoneX ? 'iphonex' : '']"
          :style="{ 'border-color': themeConfig.splitLineColor, background: themeConfig.menuBackground }"
        >
          <view :class="['menu-item', { 'active': menuName === 'mulu' }]" @click="handleSwitchMenu('mulu')">
            <view class="iconfont icon-menu"></view>
            <view>目录</view>
          </view>
          <view :class="['menu-item', { 'active': menuName === 'setting' }]" @click="handleSwitchMenu('setting')">
            <view class="iconfont icon-setting"></view>
            <view>设置</view>
          </view>
          <view :class="['menu-item', { 'active': menuName === 'mode' }]" @click="handleSwitchMenu('mode')">
            <view class="iconfont icon-moshi"></view>
            <view>模式</view>
          </view>
          <view :class="['menu-item', { 'active': menuName === 'theme' }]" @click="handleSwitchMenu('theme')">
            <view class="iconfont icon-night"></view>
            <view>主题</view>
          </view>
        </view>
      </Transition>
    </view>
  </view>
</template>

<script>
import Transition from "@/components/Transition";
import ChapterMulu from "./ChapterMulu";
import { mapState, mapGetters } from "vuex";

export default {
  props: {
    canRead: Boolean,
  },

  components: {
    Transition,
    ChapterMulu
  },

  computed: {
    ...mapGetters(["themeConfig", "isIphoneX"]),
    ...mapState({
      bookid: state => state.reader.bookid,
      name: state => state.reader.name,
      chapterInfo: state => state.reader.chapterInfo,
      maxChapterNum: state => state.reader.maxChapterNum,
      chapterNum: state => state.reader.chapterNum,
      menuName: state => state.reader.menuName,
      showMenu: state => state.reader.showMenu,
      theme: state => state.reader.theme,
      bright: state => state.reader.bright,
      fontSize: state => state.reader.fontSize,
      isAutoBuy: state => state.reader.isAutoBuy,
      modeName: state => state.reader.modeName,
    }),

    backgroundColor() {
      const menuBackground = this.themeConfig.menuBackground;
      return this.menuName === "mulu"
        ? `linear-gradient(to bottom, transparent 0, transparent 45px, ${menuBackground} 45px, ${menuBackground} 100%)`
        : menuBackground;
    }
  },

  methods: {
    getColorItemStyle(type) {
      return `background: ${
        this.themeConfig.displayColor[type]
      };border: 1px solid ${
        this.theme === type
          ? this.themeConfig.currentThemeBorderColor
          : "transparent"
      }`;
    },

    // 点击下一章和上一章
    loadChapter(params) {
      this.$emit("load-chapter", params);
    },

    // 拖动滑块显示指定章节
    changeChapter(event) {
      this.$emit("load-chapter", { num: event.detail.value });
    },

    handleSwitchMenu(menu) {
      const updateResult = { menuName: menu };
      if (menu === 'mulu') {
        updateResult.noScroll = true;
      }
      this.$store.commit("updateReader", updateResult);
    },

    handleChangeBright(event) {
      // #ifndef H5
      const bright = event.detail.value / 100;
      uni.setScreenBrightness({ value: bright });
      // #endif

      // #ifdef H5
      uni.showToast({ title: "浏览器环境暂不支持调节亮度", icon: "none" });
      // #endif
      this.$store.commit("updateReader", { bright: event.detail.value });
    },

    handleChangeFontSize(addOrReduce) {
      let fontSize = this.fontSize;
      if (addOrReduce === "add") {
        fontSize += 1;
      } else if (addOrReduce === "reduce") {
        fontSize -= 1;
      }
      this.$store.commit("updateReader", { fontSize });
    },

    handleSwitchMode(mode) {
      this.$store.commit("updateReader", { modeName: mode });
    },

    changeAutoBuy(event) {
      this.$store.commit("updateReader", { isAutoBuy: event.detail.value });
    },

    switchTheme(theme) {
      this.$store.commit("updateReader", { theme });
      uni.setNavigationBarColor({
        frontColor: this.theme === "dark" ? "#ffffff" : "#000000",
        backgroundColor: this.themeConfig.menuBackground,
        animation: {
          duration: 300,
          timingFunc: "easeIn"
        }
      });
    },

    closeMulu() {
      this.$store.commit("updateReader", { showMenu: false, noScroll: !this.canRead });
    }
  }
};
</script>

<style lang="scss">
.menu {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  z-index: 1000;

  .menu-content {
    height: 150rpx;
  }

  .menu-footer {
    height: 120rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e9e9e9;
    font-size: 24rpx;

    .menu-item {
      width: 100rpx;
      text-align: center;

      &.active {
        font-weight: bold;
      }
    }

    .iconfont {
      font-size: 44rpx;
    }
  }

  &.default {
    .menu-content {
      .info {
        text-align: center;
        font-size: 28rpx;
        padding: 24rpx 24rpx 20rpx 24rpx;
        line-height: 1;
      }

      .form {
        height: 66rpx;
        line-height: 66rpx;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
      }

      button {
        display: inline-block;
        background: none;
        line-height: 60rpx;
        font-size: 30rpx;
        height: 60rpx;
        color: inherit;

        &::after {
          display: none;
        }
      }

      text[class*="icon-arrow"] {
        font-weight: 600;
        padding: 4px 12px;
      }

      slider {
        display: inline-block;
        width: 100%;
        margin-left: 30rpx;
        margin-right: 30rpx;
      }
    }
  }

  &.setting {
    .menu-footer {
      display: none;
    }

    .menu-content {
      height: 100%;
      padding: 0 28rpx;

      .bright {
        height: 88rpx;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e9e9e9;
        padding: 0 10rpx;

        .iconfont {
          font-size: 40rpx;
          padding: 8rpx 0;
        }

        .icon-dark {
          margin-left: -10rpx;
        }

        .icon-light {
          margin-right: -10rpx;
        }

        slider {
          display: inline-block;
          width: 500rpx;
        }
      }

      .font-size {
        height: 88rpx;
        line-height: 88rpx;
        text-align: left;
        border-bottom: 1px solid #e9e9e9;
        overflow: hidden;

        text {
          font-size: 30rpx;
        }
      }

      .right {
        float: right;

        .iconfont {
          font-size: 50rpx;
          vertical-align: middle;
          padding: 0 10rpx;
        }

        .cur-font-size {
          font-size: 40rpx;
          vertical-align: middle;
          margin-left: 30rpx;
          margin-right: 30rpx;
        }
      }

      .auto-buy {
        height: 88rpx;
        line-height: 88rpx;
        font-size: 30rpx;
      }

      switch {
        transform: scale(0.7);
      }
    }
  }

  &.mode {
    .mode-select {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
      height: 100%;

      .mode-item {
        width: 240rpx;
        height: 72rpx;
        font-size: 24rpx;
        line-height: 72rpx;
        text-align: center;
        border-radius: 8rpx;
        position: relative;

        &:first-child {
          margin-right: 80rpx;
        }

        .icon-book, .icon-gundong {
          vertical-align: middle;
          margin-right: 15rpx;
        }

        .icon-xuanzhong1 {
          position: absolute;
          bottom: -2rpx;
          right: -4rpx;
          width: 32rpx;
          height: 32rpx;
          line-height: 32rpx;
        }

        &-text {
          vertical-align: middle;
        }
      }
    }
  }

  &.theme {
    .color {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      padding: 30rpx 10rpx 0 10rpx;
      box-sizing: border-box;

      .color-item {
        text-align: center;

        & > text {
          font-size: 24rpx;
          margin-top: 10rpx;
        }
      }

      .color-item-block {
        width: 150rpx;
        height: 50rpx;
        border-radius: 8rpx;
        text-align: center;
      }
    }
  }

  &.mulu {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    padding: 0;
    transition: all 0.3s;

    .menu-content {
      flex: 1;
      position: relative;
    }

    .menu-footer {
      padding: 0 20rpx;
    }
  }
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  z-index: 1;
  transition: none;
}

.reader .buy {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 980;
  text-align: center;
}

.reader .buy-inner {
  position: relative;
  width: 100%;
  margin-top: 200rpx;
  height: calc(100% - 200rpx);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 30%,
    rgba(248, 247, 252, 1) 100%
  );
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-end;
  align-items: center;
}

.reader .buy-inner button {
  width: 90%;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  text-align: center;
  font-size: 36rpx;
  background: #dadada;
  margin-bottom: 40rpx;
}

.reader .buy-inner .cancel-btn {
  color: #f72528;
}

.reader.night {
  color: #585858;
  background: #161616;
}

.reader.night .loading {
  background: #161616;
}

.reader.night .menu {
  background: #343434;
}

.reader.night .menu::before {
  box-shadow: 0px 0px 2rpx 2rpx #525252;
}

.reader.night .menu.default .menu-content button {
  color: #878787;
}

.reader.night .menu {
  color: #878787;
}

.reader.night .menu .menu-footer {
  border-color: #4a4a4a;
}

.reader.night .menu.setting .menu-content .bright {
  border-color: #4a4a4a;
}

.reader.night .menu.setting .menu-content .font-size {
  border-color: #4a4a4a;
}

.reader.night .menu.setting .menu-content .right .iconfont {
  color: #878787;
}

.reader.night .bottom-btn > button {
  background-color: #333;
  color: #fff;
  box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
}

.reader.night .left-btns > button {
  background-color: #333;
  color: #fff;
  box-shadow: 6rpx 6rpx 8rpx rgba(26, 26, 26, 0.2);
}

.reader.night .buy-inner {
  background: linear-gradient(
    to bottom,
    rgba(22, 22, 22, 0) 0%,
    rgba(22, 22, 22, 1) 30%,
    rgba(22, 22, 22, 1) 100%
  );
}

.reader.night .buy-inner button {
  background: #686868;
  color: #888787;
}

/* #ifdef H5 */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
  only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
  only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  .menu-footer {
    height: 188rpx;
    height: calc(120px + constant(safe-area-inset-bottom));
    height: calc(120px + env(safe-area-inset-bottom));
    padding-bottom: 68rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .menu.setting .menu-content {
    padding-bottom: 68rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
/* #endif */
/* #ifndef H5 */
.menu-footer.iphonex {
  height: 188rpx;
  padding-bottom: 68rpx;
}
.menu.setting .menu-content {
  padding-bottom: 68rpx;
}

.reader {
  &__left-btns {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    position: absolute;
    right: 30rpx;
    transition: margin-right 0.5s;

    &.listen {
      bottom: 580rpx;
    }

    &.fenxiang {
      bottom: 450rpx;
    }

    &.in {
      margin-right: 0rpx;
    }

     &.out {
      margin-right: -150rpx;
    }

    .iconfont {
      font-size: 48rpx;
    }

    &:active .iconfont {
      font-weight: bolder;
    }
  }
}
/* #endif */
</style>
